<template>
    <div>
        <!--  -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/rota'}">医生排班管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/rule'}">新增排班规则</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="block">
            <span class="demonstration">选择日期</span>
            <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="searchscheduling" style="margin-left:10px;"  >查询</el-button>
            <el-button type="primary" @click="toRota">新增排班规则</el-button>
            <el-button type="primary"  @click="dialogTableVisible = true">生成排班计划</el-button>
            <el-dialog title="排班规则表" align="center" :visible.sync="dialogTableVisible">
                 <div align="center">
     <span>科室 选择</span>
      <el-select size="mini" style="width: 20%" v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
       <el-button size="mini" type="primary" style="margin-left:10px;"  >查询</el-button>
       <el-button size="mini" type="primary">清空</el-button>
      </div>
  <el-table 
    border
    height="300"
   
    
    style="width: 100%; margin-top: 20px" :data="tableArray">
<el-table-column
      type="selection"
      width="55">
    </el-table-column>
            <el-table-column prop="scheddate" label="规则名称" align="center"></el-table-column>
            <el-table-column prop="deptname" label="科室名称" align="center"></el-table-column>
            <el-table-column prop="realname" label="医生姓名" align="center"></el-table-column>
            <el-table-column prop="noon" label="时间" align="center"></el-table-column>
  </el-table>
<div style="margin-top:20px;">

       <span class="demonstration">选择日期</span>
            <el-date-picker size="mini" v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
                 <el-button size="mini" type="primary" style="margin-left:10px;" >生成排班计划</el-button>
</div>
 <div style="margin-top:20px;" align="center">
             <el-button size="mini"  type="primary" @click="dialogTableVisible=false" >关闭</el-button>
        </div>
           </el-dialog>



        </div>
        <el-table :data="tableArray" border style="width: 100%"  >
            <el-table-column prop="date" label="编号" type="index" align="center"></el-table-column>
            <el-table-column prop="scheddate" label="日期" align="center"></el-table-column>
            <el-table-column prop="deptname" label="科室" align="center"></el-table-column>
            <el-table-column prop="realname" label="医生" align="center"></el-table-column>
            <el-table-column prop="noon" label="午别" align="center"></el-table-column>
            <el-table-column prop="registname" label="挂号级别" align="center"></el-table-column>
            <el-table-column prop="registquota" label="挂号限额" align="center"></el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="40">
            </el-pagination>
        </div>
       
      
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dialogTableVisible:false,
                value1: '',
                currentPage: 4,
                 options: [
        {
          value: "选项1",
          label: "心血管内科",
        },
        {
          value: "选项2",
          label: "消化内科",
        },
        {
          value: "选项3",
          label: "呼吸科",
        },
        {
          value: "选项4",
          label: "骨科",
        },
        {
          value: "选项5",
          label: "中医",
        },
      ],
      value: "",
                tableArray: [{
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '谢广坤',
                        noon: '上午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    }, {
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '赵四',
                        noon: '下午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    }, {
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '谢广坤',
                        noon: '上午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    }, {
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '赵四',
                        noon: '下午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    },{
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '谢广坤',
                        noon: '上午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    }, {
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '赵四',
                        noon: '下午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    },{
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '谢广坤',
                        noon: '上午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    }, {
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '赵四',
                        noon: '下午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    },{
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '谢广坤',
                        noon: '上午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    }, {
                        scheddate: '2000-01-01',
                        // scheduling 的deptId关联科室Id-关联科室表，根据id查询名称
                        deptname: '心血管内科',
                        // scheduling 的userId关联联User表，根据id查询名称
                        realname: '赵四',
                        noon: '下午',
                        //  scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registname
                        registname: '专家号',
                        // scheduling 的userId关联关联User表的registeID 关联RegistLevel表的registquota
                        registquota: '20',
                    },
                ]
            }
        },
        methods: {
            // 页码的规则
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },async searchscheduling() {
            const {
                data: res
            } = await this.$http.post(
                //  后台地址  
            );
            console.log(res);
            console.log(res.data);
            // console.log("--------------------------------")
            if (res.meta.status !== 200) {
                return this.$message.error(res.meta.msg);
                console.log("--------------------------------");
                console.log("res.data");
            }
            this.tableArray = res.data;
            console.log("*************************");
            console.log(this.tableArray);
            console.log("--------------------------------");
        },
        toRota(){
          this.$router.push('/rule')
        },
       
        
        toPlan(){this.$router.push('/plan')

        }
        },
        
    }
</script>